class MessageBox {
    constructor(options) {
        this.options = Object.assign({
            width: 600
        },options)

        this.create()
        this.successcallback()
    }
    
    create() {
        this.el=document.createElement('div')
        this.el.classList.add('message-box')
        let content=`
            <div class="bg"></div>
            <div class="card">
            <header>
                标题名称
                <span>x</span>
            </header>
            <main>消息内容</main>
            <footer>
                <button>确定</button>
            </footer>
            </div>
        `
        this.el.innerHTML=content
        document.body.appendChild(this.el)
        document.querySelector('.card').style.width=`${this.options.width}px`
    }

    successcallback() {
        const button=document.querySelector('.message-box button')
        button.addEventListener('click',this.options.success.bind(this))
    }
    hide() {
        this.el.remove()
    }
}

export default (options)=>new MessageBox(options)